<template>
    <div class="body">
        <el-select v-model="student.city" filterable placeholder="面积图" style="margin-left: 5px;">
          <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="student.major" filterable placeholder="请选择专业" style="margin-left: 5px;">
          <el-option v-for="item in majors" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="student.enrollmentYear" filterable placeholder="请选择年份" style="margin-left: 5px;">
          <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" style="margin-left: 5px;" @click="loadPost3()">查询</el-button>
        <div class="box" id="container3">
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
// 引入axios
import axios from 'axios'
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Echarts3',
    components: {
    },
    data() {
        return {
            student: {
              name: '',
              city: '',
              major: '',
              enrollmentYear: ''
            },
            citys: [
                {
                    value: '北京',
                    label: '北京'
                }, {
                    value: '上海',
                    label: '上海'
                }, {
                    value: '广州',
                    label: '广州'
                }, {
                    value: '深圳',
                    label: '深圳'
                },
            ],
            majors: [
                {
                    value: '计算机科学',
                    label: '计算机科学'
                }, {
                    value: '物理学',
                    label: '物理学'
                }, {
                    value: '英语文学',
                    label: '英语文学'
                }, {
                    value: '化学工程',
                    label: '化学工程'
                }, {
                    value: '经济学',
                    label: '经济学'
                },

            ],
            years: [
                {
                    value: 2023,
                    label: 2023
                }, {
                    value: 2022,
                    label: 2022
                }, {
                    value: 2021,
                    label: 2021
                }, {
                    value: 2020,
                    label: 2020
                },
            ]
        }
    },
    methods: {

      loadPost3() {
        axios.post('http://127.0.0.1:9090/students/echart1', this.student).then(res => res.data).then(res => {
          // console.log(res)
          this.drawChart3(res)
        })
      },

      drawChart3(data) {
            //面积图
            var chartDom3 = document.getElementById('container3');
            // 判断是否已经初始化
            if (echarts.getInstanceByDom(chartDom3)) {
                // 已初始化，销毁实例
                echarts.getInstanceByDom(chartDom3).dispose();
            }
            var myChart3 = echarts.init(chartDom3);
            var option3 = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.name
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: data.data,
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            };
            myChart3.setOption(option3);
        },
    },
}
</script>

<style>
.body {
    height: 100vh;
    /* 弹性盒子模型 */
    justify-content: center;
    align-items: center;

}

.box {
    width: 100%;
    height: 600px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>
